<template>
  <div class="page-header col-xs-offset-2 col-xs-8">
    <h2>Vue路由测试{{a}}-{{b}}</h2>
    <button @click="tui">←后退</button>
    <button @click="jin">前进→</button>
    <button @click="toHome">去Home</button>
  </div>
</template>

<script>
  export default {
    name:'Header',
    props:['a','b'],
    methods: {
      toHome(){

        // 编程式跳转，且传入了成功的回调、失败的回调
        /* this.$router.push('/home',
          function(){console.log('跳转成功')},
          function(){console.log('跳转失败')}
        ) */

        // 编程式跳转，且传入第二个参数值为函数，目的是：避免重复跳转出现异常
        // this.$router.push('/home',()=>{})

        // 编程式跳转，后面"挂"一个catch
        this.$router.push('/home').catch(()=>{})
        
      },
      tui(){
        this.$router.back()
      },
      jin(){
        this.$router.forward()
      }
    },
  }
</script>

<style scoped>
  img {
    width: 100px;
  }
</style>